<template>
  <div class="box">
    <!-- 左上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="瓦斯抽采测点监测"
    >
      <!-- 钻孔统计分析 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="sensorSum">
          <p class="sum">瓦斯抽采测点数量</p>
          <p>
            <span class="num" style="color: rgba(0, 253, 255, 100)">{{measurePointNum}}</span
            ><span class="piece">个</span>
          </p>
        </div>
        <!-- 测点分布统计 -->
        <div class="charttitle">测点分布统计</div>
        <div class="sensorSort">
          <div class="chat">
            <RoseChart
              :data="gasMonitorInfoList"
              :color="color"
            />
          </div>
          <div class="right">
            <p v-for="(v, driList) in gasMonitorInfoList" :key="driList">
              <span class="point" :style="activation(v.x)"></span
              ><span class="title">{{ v.x }}</span
              ><span class="num">{{ v.y }}</span
              ><span class="drpiece">个</span>
            </p>
          </div>
        </div>
        <div class="chartBroken">
          <div class="charttitle">测点列表</div>
          <div class="line" />
          <div />
        </div>
        <div class="search-wrap">
          <HerinSelect
            v-model="selectType"
            class="herin-select"
            :options="selectOption"
            place-holder=""
            :height="28"
            :width="105"
            :showOptionscount="6"
            @HerinSelectChange="handleSelectChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <div
            class="input-box"
            style="background-color: rgba(255, 255, 255, 0.05)"
          >
            <input v-model="searchInput" type="text" placeholder="搜索..." />
            <i
              v-show="searchInput"
              class="el-icon el-icon-close"
              @click="clearInput"
            />
            <i class="el-icon el-icon-search" @click="handleSearch" />
          </div>
        </div>
        <!-- 钻孔列表 -->
        <div class="websiteBox">
          <template v-if="gasMonitorInfos.length > 0">
            <div class="website" v-for="(v, website) in gasMonitorInfos" :key="website">
              <p class="title">
                {{ v.monitorNo
                }}<span
                  ><img src="@/assets/img/monitor/icon-6.png" alt="" />{{
                    v.monitorLoc
                  }}</span
                >
              </p>
              <div class="content">
                <div class="content-item">
                  <p class="mb9 item-p">
                    <span>甲烷</span>
                    <span class="ml5">{{ v.gas }}</span>
                  </p>
                  <p class="item-p">
                    <span>流量</span>
                    <span class="ml5">{{ v.flow }}</span>
                  </p>
                </div>
                <div class="content-item">
                  <p class="mb9 item-p">
                    <span>压力</span>
                    <span class="ml5">{{ v.press }}</span>
                  </p>
                  <p class="item-p">
                    <span>温度</span>
                    <span class="ml5">{{ v.temperate }}</span>
                  </p>
                </div>
              </div>
            </div>
          </template>
          <div v-else class="isCommonLists">暂无数据</div>
        </div>
      </div>
    </HerinContainer>
    <!-- 左下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Left"
      title="重点区域瓦斯监测"
    >
      <!-- 重点区域瓦斯监测-->
      <div slot="content" class="MainCoal-box-content">
        <div class="gas" v-for="(v, GASlist) in GASlist" :key="GASlist">
          <div class="head">
            <p class="title">{{ v.workingFaceNo }}</p>
            <p>
              <span class="num">{{ v?.gasItem.slice(0, -1) }}</span
              ><span class="piece">%</span>
            </p>
          </div>
          <div class="GAScONT">
            <div v-for="(vn,GAScONT) in v.mashgasRealDataVo" :key="GAScONT">
              <el-tooltip placement="bottom-start" effect="light">
                <div slot="content">{{vn.deviceMonitorLoc}}</div>
                <p class="name">{{vn.deviceMonitorLoc}}</p>
              </el-tooltip>
              <p>
                <span class="num">{{ vn?.stationValue.slice(0, -1) }}</span
                ><span class="piece">%</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import RoseChart from '@/components/chart/pie/RoseChart.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';

import { getKeAreaGas, getAllType, queryGasMonitor } from '@/api/item/monitor/gas';

export default {
  components: {
    RoseChart,
    HerinSelect,
    HerinContainer
  },
  data() {
    return {
      selectOption: [
        {
          label: '全部区域',
          value: '全部区域'
        }
      ],
      selectType: '全部区域',
      searchInput: '',
      GASlist: [],
      color: ['#5087EC', '#34C8FF', '#00FDFF', '#57FFAA', '#B2F98C', '#6FFACB'],
      measurePointNum: '',
      gasMonitorInfoList: [],
      gasMonitorInfos: [],
      actionLoopTimer3S: null
    };
  },
  computed: {
    activation() {
      return (icontent) => {
        if (icontent === '204回顺') {
          return {
            'background-color': '#5087EC'
          };
        } else if (icontent === '40103运顺') {
          return {
            'background-color': '#34C8FF'
          };
        } else if (icontent === '40103回顺') {
          return {
            'background-color': '#00FDFF'
          };
        } else if (icontent === '201回顺') {
          return {
            'background-color': '#57FFAA'
          };
        } else if (icontent === '103回顺') {
          return {
            'background-color': '#B2F98C'
          };
        } else if (icontent === '103运顺') {
          return {
            'background-color': '#6FFACB'
          };
        }
      };
    }
  },
  mounted() {
    this.startActionLoop3S(this.all3SFun);
  },
  beforeDestroy() {
    this.actionLoopTimer3S && clearInterval(this.actionLoopTimer3S);
    this.actionLoopTimer3S = null;
  },
  methods: {
    // 每隔 3S 循环查询数据
    startActionLoop3S(callback) {
      callback();
      this.actionLoopTimer3S = setInterval(callback, 3000);
    },
    all3SFun() {
      this.getKeAreaGas();
      this.getAllType();
      this.queryGasMonitor();
    },
    // 获取钻孔分析列表数据
    async queryGasMonitor() {
      const params = {
        areaName: this.selectType === '全部区域' ? '' : this.selectType,
        keyWard: this.searchInput
      };
      const res = await queryGasMonitor(params);
      if (res.data.code === 200) {
        const resInfo = res.data.data;
        this.measurePointNum = resInfo.measurePointNum;
        this.gasMonitorInfos = resInfo.gasMonitorInfos;
        this.gasMonitorInfoList = resInfo.gasMonitorInfoList.map(item => {
          return {
            x: item.gasMonitorName,
            y: item.gasMonitorNum * 1
          };
        });
      }
    },
    // 点击钻孔分析下拉菜单
    handleSelectChange() {
      this.searchInput = '';
      this.queryGasMonitor();
    },
    // 点击钻孔分析搜索按钮
    handleSearch() {
      this.queryGasMonitor();
    },
    // 点击钻孔分析清除搜索框
    clearInput() {
      this.searchInput = '';
      this.queryGasMonitor();
    },

    // 重点区域瓦斯监测
    async getKeAreaGas() {
      const res = await getKeAreaGas();
      if (res.data.code === 200) {
        this.GASlist = res.data.data;
      }
    },

    // 获取所有区域
    async getAllType() {
      const res = await getAllType();
      if (res.data.code === 200) {
        const data = res.data.data.map(item => {
          return {
            label: item,
            value: item
          };
        });
        this.selectOption = [...[
          {
            label: '全部区域',
            value: '全部区域'
          }
        ], ...data];
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .num {
    font-size: 16px;
    text-align: right;
    font-family: Helvetica-bold;
  }
  .piece {
    color: rgba(131, 131, 131, 100);
    font-size: 12px;
    text-align: left;
    font-family: Helvetica-regular;
    margin: 0 0.9375rem 0 0.3125rem;
    display: inline;
  }
  .sensorSum {
    display: flex;
    width: 20.625rem;
    height: 2.5rem;
    justify-content: space-between;
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    margin-bottom: 1rem;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    padding-left: 0.625rem;
    p {
      display: flex;
      align-items: center;
    }
    .sum {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
      text-align: left;
      font-family: Helvetica-regular;
    }
  }
  .charttitle {
    font-size: 0.75rem;
    color: $light2Grey;
    margin: 0.625rem 0;
  }
  .broken {
    height: 2.375rem;
    width: 20.625rem;
    display: flex;
    justify-content: space-between;
    div {
      width: 10rem;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 0.625rem;
    }
    .title {
      color: rgba(248, 248, 248, 100);
      font-size: 14px;
    }
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
  }
  .outage {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    div:nth-child(-n + 2) {
      margin-bottom: 0.9375rem;
    }
    div {
      width: 9.6875rem;
      height: 3.9375rem;
      background-color: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      p {
        text-align: center;
      }
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin: 0.625rem 0 0.4rem 0;
      }
      .num {
        color: rgba(251, 218, 107, 100);
        font-size: 16px;
      }
    }
  }
  .cont {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0 0.625rem;
    height: 3.9375rem;
    margin-bottom: 10px;
    img {
      width: 0.75rem;
      height: 0.75rem;
    }
    .head {
      display: flex;
      justify-content: space-between;
      margin: 0.625rem 0 0.4rem 0;
      position: relative;
      .bord {
        position: absolute;
        width: 0.125rem;
        height: 0.875rem;
        background-color: rgba(87, 255, 170, 100);
        left: -0.625rem;
        top: 0.1875rem;
      }
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
      }
      .show {
        color: rgba(173, 173, 173, 100);
        font-size: 12px;
        width: 11.5625rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.1875rem;
      }
    }
    .materials {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        color: rgba(248, 248, 248, 100);
        font-size: 12px;
        margin-right: 0.3125rem;
      }
      .pieceMAST {
        margin-left: 0.3125rem;
        color: rgba(131, 131, 131, 100);
        font-size: 12px;
        text-align: left;
        font-family: Helvetica-regular;
      }
    }
  }
  .sensorSort {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .chat {
      width: 12.0625rem;
      height: 8.5rem;
    }
    .right {
      height: 8.5rem;
      .point {
        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
      }
      .drpiece {
        color: rgba(131, 131, 131, 100);
        font-size: 12px;
        text-align: left;
        font-family: Helvetica-regular;
        display: inline;
      }
      .title {
        color: rgba(173, 173, 173, 100);
        font-size: 12px;
        margin: 0 0.75rem 0 0.375rem;
        min-width: 4.5rem;
        display: inline-block;
      }
      .num {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        margin-right: 0.3125rem;
      }
    }
  }
  .chartBroken {
    display: flex;
    align-items: center;
    .charttitle {
      font-size: 0.75rem;
      color: $light2Grey;
      margin-right: 0.3125rem;
    }
    .line {
      flex: 1;
      height: 0.0625rem;
      border-bottom: 0.0625rem dashed $darkGrey;
    }
  }
  .websiteBox {
    height: 11.75rem;
    padding-right: .625rem;
    overflow: auto;
    width: calc(100% + 10px);
    .website:last-child{
      margin-bottom: 0;
    }
    .website {
      height: 4.8125rem;
      border-radius: 4px;
      padding: .625rem 1.25rem;
      margin-bottom: 0.625rem;
      background-color: rgba(255, 255, 255, 0.1);
      overflow: hidden;
      .title {
        display: flex;
        justify-content: space-between;
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        height: .875rem;
        align-items: center;
        margin: 0 0 0.3125rem 0;
        img {
          width: 0.75rem;
          height: 0.75rem;
        }
        span {
          color: rgba(173, 173, 173, 100);
          font-size: 12px;
          display: flex;
          align-items: center;
        }
      }
      .content {
        display: flex;
        justify-content: space-between;
        .content-item {
          width: 10.25rem;
          p {
            color: rgba(216, 216, 216, 100);
            font-size: .75rem;
            height: .75rem;
          }
          .mb9{
            // margin-bottom: .5625rem;
          }
          .ml5{
            margin-left: .3125rem;
            color: rgba(52, 200, 255, 100);
          }
          .item-p{
            width: 100%;
            display: inline-flex;
            justify-content: space-between;
          }
        }
        .content-item:nth-child(1n) {
          padding-right: 1.875rem;
          padding-left: 0;
          border-right: .0625rem solid #8d8d8d;
        }
        .content-item:nth-child(2n) {
          padding-left: 1.875rem;
          padding-right: 0;
          border-right: none;
        }
      }
    }
  }

  .gas {
    margin-bottom: 0.625rem;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem;
    .num {
      color: rgba(0, 253, 255, 100);
      font-size: 16px;
      font-weight: 900;
    }
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: .625rem;
      .title {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        font-weight: 700;
      }
    }
    .GAScONT {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      height: 128px;
      width: calc(100% + 5px);
      padding-right: 5px;
      overflow: auto;
      div:nth-last-of-type(-n+2){
        margin-bottom: 0;
      }
      div {
        width: 9.375rem;
        height: 3.6875rem;
        padding-top: .625rem;
        text-align: center;
        margin-bottom: 0.625rem;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: .25rem;
        p {
          text-align: center;
        }
        .name {
          width: 8.4375rem;
          margin: 0 auto;
          color: rgba(248, 248, 248, 100);
          font-size: .875rem;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
      }
    }
  }
  .search-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    .input-box {
      width: 13.4375rem;
      height: 1.75rem;
      border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
      border-radius: 0.25rem;
      position: relative;
      text-align: left;
      box-sizing: border-box;
      input {
        width: 72%;
        height: 100%;
        margin: 0 0.625rem;
        border: none;
        font-size: 0.75rem;
        color: rgba($color: $white, $alpha: 0.9);
        background-color: transparent;
        outline-width: 0rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.75rem;
        color: $secondaryTextColor;
      }
      .el-icon {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        cursor: pointer;
        color: rgba($color: $white, $alpha: 0.5);
        position: absolute;
        top: 0.4375rem;
        &-close {
          right: 1.375rem;
        }
        &-search {
          right: 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
